<template>
  <div class="edit-view">
    <div class="header">
      <h2>系部管理</h2>
      <p>系部管理为最根节点，可以添加和修改系部数据</p>
    </div>
    <div class="addons" style="display: flex; justify-content: end">
      <el-button type="primary" @click="handleAdd">添加系部</el-button>
    </div>
    <div class="data-table">
      <el-table :loading="dataLoading" :data="tableData" style="width: 100%">
        <el-table-column label="ID" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.departmentID }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <el-tag type="info" size="medium">{{ scope.row.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="描述">
          <template slot-scope="scope">
            <span>{{ scope.row.desc.length > 0 ? scope.row.desc : "无" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑对话框 -->
    <el-dialog
      :title="isAdd ? '添加项目' : '编辑项目'"
      :visible.sync="editDialogShow"
      width="30%"
    >
      <el-form ref="form" :model="formData" :rules="formRules">
        <el-form-item label="系部名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="finishEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { ResourcesEdit } from "../../api/api";

let resourcesEdit = ResourcesEdit("department");

export default Vue.extend({
  data: () => ({
    tableData: [],
    // 编辑框数据
    formData: {},
    // 表单验证
    formRules: {
      name: [
        {
          required: true,
          message: "名称必须大于2个字符，并且小于20个字符",
          min: 2,
          max: 20,
        },
      ],
      desc: [
        {
          required: true,
          message: "描述必须大于4个字符，并且小于50个字符",
          min: 4,
          max: 50,
        }
      ],
    },
    // 是否正在加载数据
    dataLoading: false,
    // 是否是添加模式
    isAdd: false,
    editDialogShow: false,
  }),
  methods: {
    handleEdit(index: number, row: any) {
      this.isAdd = false;
      this.editDialogShow = true;
      this.formData = JSON.parse(JSON.stringify(row));
    },
    handleAdd() {
      this.isAdd = true;
      this.editDialogShow = true;
      this.formData = {};
    },
    handleDelete(index: number, row: any) {
      this.$confirm("你确定要删除这条记录吗？")
        .then(async () => {
          let res = await resourcesEdit.delete(row.departmentID);
          let data = res.data;
          if (data.code == 200) {
            this.$message.success(data.message);
            this.updateList();
          } else {
            this.$message.error(data.message);
          }
        })
        .catch(() => {});
    },
    finishEdit() {
      (this.$refs.form as any).validate(async (valid: boolean) => {
        if (valid) {
          if (this.isAdd) {
            let addRes = await resourcesEdit.add(this.formData);
            let addData = addRes.data;
            if (addData.code == 200) {
              this.$message.success(addData.message);
              this.updateList();
              this.editDialogShow = false;
            } else {
              this.$message.error(addData.message);
            }
          } else {
            let editRes = await resourcesEdit.edit(
              (this.formData as any).departmentID,
              this.formData
            );
            let editData = editRes.data;
            if (editData.code == 200) {
              this.$message.success(editData.message);
              this.updateList();
              this.editDialogShow = false;
            } else {
              this.$message.error(editData.message);
            }
          }
        }
      });
    },
    async updateList() {
      this.dataLoading = true;
      this.tableData = [];
      try {
        let res = await resourcesEdit.get();
        let data = res.data;
        if (data.code == 200) {
          this.tableData = data.data;
        }
      } catch (err) {}
      this.dataLoading = false;
    },
  },
  mounted() {
    this.updateList();
  },
});
</script>

<style lang="scss" scoped>
.edit-view {
  .header {
    p {
      margin: 1rem 0;
      color: #999;
    }
  }
}
</style>